<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no"/>
    <title>商品列表</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <style>
        body {
            background: #f3f3f3;
        }

        .bigPic .divPrice {
            color: #ec2e2e;
            font-weight: bold;
            text-align: left;
            padding-left: 10px !important;
            font-size: 14px;
        }

        .bigPic .divBuy {
            text-align: right;
            padding-right: 10px !important;
            color: #327afa;
            /*font-weight: bold;*/
            font-size: 12px;
            float: right !important;
        }

        .bigPic .divPrice, .divBuy {
            padding: 5px;
            overflow: hidden;
        }

        .bigPic .w50 {
            width: 50%;
            float: left;
        }

        .aui-ellipsis-2 {
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            word-wrap: break-word;
            white-space: normal !important;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .aui-list-view-cell {
            border-radius: 2px;
        }

        /*//一行两列样式*//**/
        .bigPic.aui-list-view.aui-grid-view {
            padding: 0 !important;
            background: #f3f3f3;
        }

        .bigPic.aui-list-view.aui-grid-view .aui-list-view-cell {
            padding: 0 !important;
        }

        .bigPic .aui-col-xs-6:nth-of-type(2n+1) {
            margin-right: 1%;
        }

        .bigPic.aui-list-view.aui-grid-view .aui-list-view-cell .aui-img-body {
            margin: 0 0 0 5px;
            margin-bottom: 1px;
            text-align: left;
        }

        .bigPic li {
            background: #fff !important;
            margin-bottom: 8px;
        }

        .bigPic .aui-col-xs-6 {
            width: 49.5%;
        }

        .bigPic .line {
            width: 90%;
            margin-left: 5%;
        }

        /*一行一列样式*/
        .smallPic .proPic {
            width: 100%;
        }

        .smallPic .divPrice {
            color: #ec2e2e;
            font-weight: bold;
            text-align: left;
            padding-left: 10px !important;
            font-size: 14px;
        }

        .smallPic .divBuy {
            text-align: right;
            padding-right: 10px !important;
            color: #9c9c9c;
            /*font-weight: bold;*/
            font-size: 12px;
            float: right !important;
        }

        .smallPic .divPrice {
            padding: 5px;
            /*padding-top:0px;*/
            overflow: hidden;
            position: absolute;
            bottom: 8px;
        }

        .smallPic .divBuy {
            padding: 5px;
            padding-left: 9px;
            overflow: hidden;
            position: absolute;
            bottom: 30px;
        }

        .smallPic .w50 {
            width: 100%;
            /*float: left;*/
            text-align: left !important;
            line-height: 1;
        }

        .smallPic.aui-list-view.aui-grid-view {
            padding: 0 !important;
            background: #f3f3f3;
        }

        .smallPic.aui-list-view.aui-grid-view .aui-list-view-cell {
            padding: 0 !important;
            padding: 8px !important;
        }

        .smallPic .proPic {
            width: 30%;
            float: left;
        }

        .smallPic .proInfo {
            width: 70%;
            float: left;
        }

        .smallPic .aui-border-b:after {
            border: none;
        }

        .smallPic .aui-col-xs-6:nth-of-type(2n+1) {
            margin-right: 0%;
        }

        .smallPic.aui-list-view.aui-grid-view .aui-list-view-cell .aui-img-body {
            margin: 0px 10px 0 10px;
            text-align: left;
        }

        .smallPic li {
            background: #fff !important;
            margin-bottom: 10px;
        }

        .smallPic .aui-col-xs-6 {
            width: 100%;
        }

        .contain {
            padding: 10px 0 0 0;
        }

        .bigPic0s {
            display: none !important;
        }
        .stock{
            color: #9A9A9A;
        }
    </style>
</head>
<body>
<div class="aui-content-padded contain gongchang">
    <ul class="aui-list-view aui-grid-view bigPic" id="stock-content">
        <!--商品列表-->
    </ul>
</div>
<script id="stock-template" type="text/x-dot-template">
    {{for (var i in it){ }}
    <li class="aui-list-view-cell aui-img aui-col-xs-6">
        <div class="proPic"><img class="aui-img-object" src="{{=it[i].thumb}}">
        </div>
        <div class="proInfo">
            <div class="aui-img-body  aui-ellipsis-2">
                {{=it[i].title}}
            </div>
            <div class="aui-img-body  aui-ellipsis-1 stock">
                库存: {{=it[i].amount}}
            </div>
            <div class="aui-border-b line"></div>
            <div class="divBuy w50 zfhuise">
                成交<span class="num">{{=it[i].sales}}</span>笔
            </div>
            <div class="divPrice w50 zfBlue">
                ￥<span class="price ">{{=it[i].price}}</span>
            </div>
        </div>
    </li>
    {{ } }}
</script>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<script type="text/javascript" src="../script/echo.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/myInfo.js"></script>
<script type="text/javascript" src="../script/jquery-1.11.3.js"></script>
<script type="text/javascript">
    var page = 1, isLock = false, brand, type = 1;
    apiready = function () {
        api.parseTapmode();
        api.addEventListener({
            name: 'stockType'
        }, function (ret, err) {
            type = ret.value.stockType;
            page = 1;
            getData();
        });
        getData();
        api.setRefreshHeaderInfo({
            visible: true,
            loadingImg: 'widget://image/ptr_pull.png',
            bgColor: '#efeff4',
            textColor: '#959595',
            textDown: '下拉刷新',
            textUp: '松开刷新',
            showTime: true
        }, function (ret, err) {
            page = 1;
            getData();
            api.refreshHeaderLoadDone();
        });

        //监听是否达到底部上拉加载
        api.addEventListener({
            name: 'scrolltobottom'
        }, function (ret, err) {
            page++;
            if (isLock == false) {
                getData();
            }
        })
    }

    function changeView(viewType) {
        if (viewType == "bigPic") {
            //一行两列
            $(".contain").find("." + viewType).addClass("smallPic");
            $(".contain").find("." + viewType).removeClass(viewType);
            $(".aui-icon-cascades").addClass("iConent");
        } else if (viewType == "smallPic") {
            //一行一列
            $(".aui-icon-cascades").removeClass("iConent");
            $(".contain").find("." + viewType).addClass("bigPic");
            $(".contain").find("." + viewType).removeClass(viewType);
        }
    }

    //获取商品列表数据
    function getData() {
        isLock = true;
        //alert('库存列表类型:' + type + '分页:' + page);
        showLoading();
        data = {
            'pagetype': 'stock',
            'type': type,
            'page': page,
        }
        var url = 'category/categoryList';
        ajaxRequest(url, 'post', data, function (ret, err) {
            hideLoading();
            if (ret.status == 1) {
                var content = $api.byId('stock-content');
                var tpl = $api.byId('stock-template').text;
                var tempFn = doT.template(tpl);
                if (page > 1) {
                    $api.append(content, tempFn(ret.msg));
                    isLock = false;
                } else {
                    $api.html(content, tempFn(ret.msg));
                    isLock = false;
                }
            } else {
                api.toast({
                    msg: '已加载完',
                    duration: 2000,
                    location: 'bottom'
                });
            }
        })
    }
</script>
</html>